<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="新增需求"></u-navbar> -->
		<view style="background-color: #efede9">
			<view class="pl-2 pr-2 font-14 lineHight-40 font-weight-bold">需求信息</view>
		</view>
		<!-- <scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 110px)" :show-scrollbar="false"> -->
		<view class="pl-3 pr-2">
			<u-form :model="form" ref="uForm">
				<u-form-item :required="true" label-width="150" label="需求标题" prop="title">
					<u-input class="mr-3" v-model="form.title" input-align="right" />
				</u-form-item>
				
				<!-- <u-form-item required style="padding-right: 10px" label-width="150" label="产品名称">
					<u-input v-model="valueProductName" :type="type" input-align="right" :border="false"
						@click="showProductName = true" />
					<u-action-sheet :list="actionProductName" v-model="showProductName"
						@click="actionClickProductName" ></u-action-sheet>
				</u-form-item> -->
				<u-form-item  required label-width="180" label="产品名称"
					prop="productInformId">
					<u-input v-model="valueProductName" placeholder="请选择产品名称" :type="type"
						input-align="right" :border="false" @click="showNatureBusinessHandler" />
					<u-picker @confirm="selectNatureBusiness" mode="selector" v-model="showNatureBusiness"
						:default-selector="[0]" :range="natureBusinessList" range-key="text"></u-picker>
				</u-form-item>
				
				<u-form-item required label-width="150" label="联系人">
					<u-input class="mr-3" :disabled="true" v-model="userInfo.legalRepresentative" input-align="right" />
				</u-form-item>
				<u-form-item required label-width="150" label="联系方式">
					<u-input class="mr-3" :disabled="true" v-model="userInfo.phone" input-align="right" />
				</u-form-item>
				<u-form-item required label-width="150" label="数量" prop="number">
					<u-input class="mr-3" v-model="form.number" input-align="right" />
					<text class="mr-3">{{productSpecsText}}</text>
				</u-form-item>
				<u-form-item required label-width="150" label="价格(元)" prop="price">
					<u-input class="mr-3" v-model="form.price" input-align="right" placeholder="￥"/>
				</u-form-item>
				<u-form-item required label-width="150" label="截止日期" prop="endTime">
					<uni-calendar ref="calendarl" :start-date="currentDate" :insert="false" :lunar="true" @confirm="confirmName" />
					<view v-if="!selectedNameDate" class="text-999999 right-1-5 position-absolute" @click="openName">
						请选择日期</view>
					<view v-else class="right-1-5 position-absolute" @click="openName">{{selectedNameDate}}</view>
				</u-form-item>
			</u-form>
		</view>
		<ferrButton title="提交需求审批" @click="submit"></ferrButton>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import ferrButton from '@/components/free-ui/ferr-button.vue'
	import calendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue'
	import $H from '@/common/free-lib/request.js'
	export default {
		components: {
			calendar,
			ferrButton,
		},
		data() {
			return {
				form: {
					productNameId: '',
					endTime: '',
					title: '',
					number: '',
					price: ''
				},
				pages: {
					pageNo: 1,
					pageSize: 100,
					total: 0 // 总页数
				},
				productSpecs: '',
				productSpecsText:'',
				type: 'select',
				selectedNameDate: null,
				valueProductName: '',
				showProductName: false,
				actionProductName: [],
				
				showNatureBusiness: false,
				natureBusinessList: [],
				border: true,
				labelStyle: {
					paddingLeft: '13px',
					width: '180px',
				},
				rules: {
					title: [{
						required: true,
						message: '需求标题不能为空',
						trigger: ['change', 'blur'],
					}],
					number: [{
							required: true,
							message: '数量不能为空',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 允许数字和最多两位小数，并且不小于零
								const reg = /^(0|[1-9]\d*)(\.\d{1,2})?$/;
								if (!reg.test(value)) {
									callback(new Error('请输入非负数字，可以有最多两位小数'));
								} else {
									callback();
								}
							},
							trigger: ['change', 'blur'],
						}
					],
					price: [{
							required: true,
							message: '价格不能为空',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								const reg = /^[0-9]*$/; // 只允许输入数字
								if (!reg.test(value)) {
									callback(new Error('请输入数字'));
								} else {
									callback();
								}
							},
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},

		onLoad() {
			this.productName();
			this.getUserInfo();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		created() {
			this.setCurrentDate();
		},
		methods: {
			selectTab(index) {
				this.currentIndex = index // 更新当前选中的选项卡的索引
			},
			showNatureBusinessHandler() {
				this.showNatureBusiness = true;
			},
			selectNatureBusiness(e) {
				this.valueProductName = this.natureBusinessList[e[0]].text
				this.form.productNameId = this.natureBusinessList[e[0]].id;
				this.productSpecsText = this.natureBusinessList[e[0]].productSpecsText;
				this.productSpecs = this.natureBusinessList[e[0]].productSpecs
			},
	
			openName() {
				this.$refs.calendarl.open();
			},
			confirmName(e) {
				this.selectedNameDate = e.fulldate;
				// 获取当前的日期
				const formattedDate = e.fulldate; // 只使用日期部分
				this.form.endTime = formattedDate;
			
			},
			setCurrentDate() {
				const now = new Date();
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份补齐两位数
				const day = now.getDate().toString().padStart(2, '0'); // 日期补齐两位数
				this.currentDate = `${year}-${month}-${day}`;
			},
			getUserInfo() {
				// 从本地存储中获取用户信息  
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.userInfo = userInfo;
				} else {
					// 如果没有用户信息，可能是用户未登录，可以进行相应处理  
					// 例如跳转到登录页面  
				}
			},

			productName() {
				$H.get(
					`/basisInform/productName/list`, {...this.pages}, {
						token: true,
					}
				).then((res) => {
					this.natureBusinessList = (res.result.records || []).map((v) => {
						return {
							text: v.productName,
							id: v.id,
							productSpecs: v.productSpecs,
							productSpecsText: v.productSpecsText,
						}
					})
				})
			},
			loadMore() {
			      if (this.pages.pageNo < this.pages.total) {
			        this.pages.pageNo++; // Increment page number
			        this.productName();
			      }
			    },
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						const requestData = {
							...this.form,
							productSpecs:this.productSpecs,
							legalRepresentative: this.userInfo.legalRepresentative,
							phone: this.userInfo.phone,
						};
						$H.post(`/down/downMarketDemand/down/add`, requestData, {
								token: true,
							})
							.then((res) => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									uni.switchTab({
										url: '/pages/tabbar/index/index'
									})
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
								}
							})
							.catch(() => {
								uni.showToast({
									title: res.message,
									icon: 'none',
								})
							})
					} else {
						uni.showToast({
							title: "请完整填写表单",
							icon: 'none'
						});
					}
				});
			}
		},
	}
</script>

<style></style>